<template>
	<f-view title="确认订单">
		<view class="page">
			<!-- <view class="tabs-container mt20 mb20">
				<view class="tabs">
					<view class="tab" :class="{ active: activeTab === 0 }" @click="setActiveTab(0)">自取</view>
					<view class="tab" :class="{ active: activeTab === 1 }" @click="setActiveTab(1)">快递</view>
				</view>
				<view class="indicator" :style="indicatorStyle"></view>
			</view> -->
			<view class="top-info mb20">
				<view class="font18 bolder mb20">精品咖啡沙龙</view>
				<view class="gray font12">未选择地址 ></view>
				<view class="h-line"></view>
				<view class="flex-center-between">
					<view>请填写跑腿地址</view>
					<text class="iconfont">&#xe60e;</text>
				</view>
				<view class="h-line"></view>
				<view class="flex-center-between">
					<view>预约时间</view>
					<view class="flex-center">
						<view class="bolder">今天（2025-06-05）14:30</view>
						<text class="iconfont">&#xe60e;</text>
					</view>
				</view>
			</view>
			<view class="remark-cell flex-center-between mb20">
				<view>订单备注</view>
				<view class="flex-center">
					<view class="font13 gray mr10">少糖</view>
					<text class="iconfont">&#xe60e;</text>
				</view>
			</view>
			<view class="order-bg">
				<view class="font16 bolder">{{'共'+goodCount+'份商品'}}</view>
        <view class="cell flex" v-for="item in cartGoods" :key="item.id">
          <view class="pic mr20 not-shrink">
            <image class="good-img mb10" mode="aspectFit"  :src="getImageUrl(item.goodsImg)"></image>
          </view>
          <view class="right flex-start-between">
            <view class="font18 ellipsis">{{item.goodsName}}</view>
            <view class="flex-center">
              <view class="result gray">X{{item.num}}</view>
              <view class="price-w">￥{{item.goodsPrice}}</view>
            </view>
          </view>
        </view>
        <view class="flex-center-end font15" style="margin-top: 30rpx">
          小计￥{{totalPrice}}
        </view>
      </view>
			<view class="bot-area">
				<div class="flex-center-end">
					<div>
            <button @click="submitOrderDown">确认下单</button>
          </div>
				</div>
			</view>
		</view>
	</f-view>
</template>

<script>
	import FView from "@/pages/components/f-view.vue";
	import {
		finalOrderDown,
		preDoPay,
		finalDoPay
	} from "@/api";
	import {getStore} from "@/config/util";
	import {mainData} from "@/pages/cart/components/mainData";
import {Validate} from "@/config/validate";
	export default {
		name: 'index',
		components: {
			FView
		},
		props: {},
		data() {
			return {
				activeTab: 0,
				userInfo: {},
				indicatorStyle: {
					left: '0rpx', // 初始位置
					width: '100rpx' // 指示器的宽度
				},
			};
		},
		computed: {
      totalPrice(){
        let goods = mainData.cartData.goods||[];
        if (!Validate.isEmpty(goods)){
          let count = 0 ;
          goods.forEach(e=>{
            count += Number(e.goodsPrice) * Number(e.num);
          });
          return count;
        }
        return 0;
      },
      cartGoods(){
        return mainData.cartData.goods ||[];
      },
			goodCount(){
			  let goods = mainData.cartData.goods||[];
			  if (!Validate.isEmpty(goods)){
			    let count = 0 ;
			    goods.forEach(e=>{
			      count += Number(e.num);
			    });
			    return count;
			  }
			  return '0';
			},
		},
		watch: {},
		onLoad(options) {
			this.userInfo = getStore('userInfo', 1) || {};
		},
		methods: {
			setActiveTab(index) {
				this.activeTab = index;
				this.updateIndicatorPosition(index);
			},
			updateIndicatorPosition(index) {
				const tabWidth = 200; // 每个选项卡的宽度 (rpx)
				const indicatorWidth = 100; // 黑色部分的宽度 (rpx)
				this.indicatorStyle = {
					left: `${tabWidth * index}rpx`, // 计算新的位置
					width: `${indicatorWidth}rpx` // 保持宽度不变
				};
			},
			submitOrderDown() {
				let ids = mainData.cartData.goods.map(v => v.id);
				let dic = {
					type: 0,
					cartId: mainData.cartData.cartId,
					customerId: this.userInfo.id,
					phone: this.userInfo.phone,
					goodsIds: ids
				};
				finalOrderDown(dic).then(res => {
					preDoPay({
						orderId: res.data
					}).then(res1 => {
						finalDoPay({
							payId: res1.data.payId,
							orderId: res.data
						}).then(res2 => {

						});
					});
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 20rpx 140rpx 20rpx;
		.h-line{
			width:100%;
			height: 1rpx;
			border-bottom: 1rpx solid #eee;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
		}
	}

	.top-info {
		padding: 20rpx;
		border-radius: 5rpx;
		background-color: white;
	}
	.remark-cell{
		padding: 30rpx 20rpx;
		background-color: white;
		border-radius: 10rpx;
	}
	.order-bg{
		background-color: white;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
	}

	.tabs-container {
		width: fit-content;
		display: flex;
		background-color: #DCDCDC;
		border-radius: 28rpx;

		.tabs {
			display: flex;
			position: relative;
		}

		.tab {
			padding: 6rpx 20rpx;
			text-align: center;
			font-size: 32rpx;
			color: #333;
			cursor: pointer;
			border-radius: 28rpx;
		}

		.tab.active {
			color: #fff;
			background-color: #000;
		}

		.indicator {
			position: absolute;
			bottom: 0;
			height: 4rpx;
			background-color: #000;
			transition: left 0.3s ease;
			/* 动画效果 */
		}
	}

	.bot-area {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 130rpx;
		width: 100%;
		background-color: white;
    padding:20rpx 30rpx;
    button{
      background-color: var(--nav-bg-c);
      border-radius: 40rpx;
      color: white;
    }
	}
  .cell{
    padding: 10rpx 0;
    border-bottom: 1rpx solid #eeeeee;
    .pic{
      width: 135rpx;
      height: 135rpx;
      border-radius: 20rpx;
      //background-color: #B7BDC6;
      image{
        width: 135rpx;
        height: 135rpx;
        border-radius: 20rpx;
        flex-shrink: 0;
      }
    }
    .right{
      width: 100%;
      .price-w{
        min-width: 130rpx;
        text-align: right;
      }
    }
  }
</style>